
<template>
  <div class="blogArticle">
    <div class="main">
      <div class="container">
        <div class="rightBox" id="comment">
          <div v-bind:article="article">
						<div>
              <div class="titleBox">
								<h1>{{article.title}}</h1>
								<p><i class=""></i><span>{{article.time}}</span><i class=""></i><span>阅读量：{{article.read}}</span></p>
							</div>
							<div class="articleText" v-html="article.content"></div>
						</div>
					</div>
          <div v-bind:comment="comment" >
						<div class="commentBox">
              <h3>评论</h3>
							<p v-if="comment.length==0">暂无评论，我来发表第一篇评论！</p>
							<div v-else>
								<div class="comment" v-for="(item,index) in comment" v-bind:index="index" :key="index" >
									<b>{{item.name}}<span>{{item.time}}</span></b>
									<p @click="changeCommenter(item.name,index)">{{item.content}}</p>
									<div v-if="item.reply.length > 0">

										<div class="reply" v-for="(reply,) in item.reply" :key="reply.time" >
											<b>{{reply.responder}}&nbsp;&nbsp;回复&nbsp;&nbsp;{{reply.reviewers}}
											<span>{{reply.time}}</span>
											</b>
											<p @click="changeCommenter(reply.responder,index)">{{reply.content}}</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
          <div v-bind:type="type" :name="oldComment" >
            <div class="commentBox">
              <h3>发表评论</h3>
              <b v-if="type">你回复&nbsp;{{oldComment}}</b>
              <textarea  value="请填写评论内容" v-model="commentText"></textarea>
              <el-button class="btn" type="primary" round @click="addComment">发表</el-button>
              <el-button class='btn' type="warning" round @click="canelCommit">取消</el-button>
              
            </div>
					</div>
        </div>
      </div>
    </div>
  </div>
      

</template>
<script>
export default {
  data() {
    return {
      commentText:"",
      commenter: "session", //评论人
      type: 0, //0为评论作者1为评论别人的评论2为评论别人的别人
      oldComment: null,
      chosedIndex: -1, //被选中的评论的index
      article: {
        title: "孔乙己节选",
        time: "2020-01-1",
        read: 50,
        content:
          "<p>鲁镇的酒店的格局，是和别处不同的：都是当街一个曲尺形的大柜台，柜里面预备着热水，可以随时温酒。做工的人，傍午傍晚散了工，每每花四文铜钱，买一碗酒，——这是二十多年前的事，现在每碗要涨到十文，——靠柜外站着，热热的喝了休息；倘肯多花一文，便可以买一碟盐煮笋，或者茴香豆，做下酒物了，如果出到十几文，那就能买一样荤菜，但这些顾客，多是短衣帮，大抵没有这样阔绰。只有穿长衫的，才踱进店面隔壁的房子里，要酒要菜，慢慢地坐喝。</p><p>我从十二岁起，便在镇口的咸亨酒店里当伙计，掌柜说，样子太傻，怕侍候不了长衫主顾，就在外面做点事罢。外面的短衣主顾，虽然容易说话，但唠唠叨叨缠夹不清的也很不少。他们往往要亲眼看着黄酒从坛子里舀出，看过壶子底里有水没有，又亲看将壶子放在热水里，然后放心：在这严重兼督下，羼水也很为难。所以过了几天，掌柜又说我干不了这事。幸亏荐头的情面大，辞退不得，便改为专管温酒的一种无聊职务了。</p>"
      },
      comment: [
        {
          name: "专业群演1",
          time: "2020-01-1",
          content: "好,西皮，6666",
          reply: [
            {
              responder: "专业捧哏",
              reviewers: "专业群演1",
              time: "2020-01-1",
              content: "你说得对"
            },
            {
              responder: "专业群演1",
              reviewers: "专业捧哏",
              time: "2020-01-1",
              content: "很强"
            }
          ]
        },
        {
          name: "路过群演2",
          time: "2020-01-1",
          content: "好,讲得非常好，good",
          reply: []
        }
      ]
    };
  },

  methods: {
    changeCommenter(name,index) {
			this.oldComment = name;
			this.chosedIndex = index;
      this.type = 1;
      
		},
    addComment() {
      if (this.type == 0) {
        this.comment.push({
          name: "session",
          time: getTime(),
          content:this.commentText ,
          reply: []
        });
      } else if (this.type == 1) {
        this.comment[this.chosedIndex].reply.push({
          responder: "session",
          reviewers: this.oldComment,
          time: getTime(),
          content: this.commentText,
          reply:[]
        });
        this.type = 0;
      }
      this.commentText = "";
    },

    canelCommit() {
      this.type = 0;
      this.commentText = "";
    },

  }
};

function getTime() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  month.length < 2 ? "0" + month : month;
  day.length < 2 ? "0" + day : day;
  return year + "-" + month + "-" + day;
}
</script>
<style>
.h1, h1 {
    font-size: 2.5rem;
}
  .blogArticle{
    width: 980px;
    margin: 0 auto;
    background-color: #f8f8f8;
  }
  .titleBox{

    border-bottom: 1px solid #ccc;
    margin: 10px 0 0;
  }
  .titleBox h1 {
    text-align: center;
    color: #01553D;
  }
  .titleBox p {
    text-align: right;
    font-size: 16px;
    margin: 10px 0;
  }
  .articleText {
    font-size: 16px;
    margin: 20px;
  }
  .articleText p {
    text-indent: 2em;
  }
  .commentBox {
    margin: 20px;
  }
  .commentBox h3 {
    color: #634322;
    background: #e9e5df;
    padding: 8px 15px;
    text-align: left;
    font-size: 16px;
  }
  .comment {
    margin-bottom: 15px;
  }
  .comment b {
    color: #01553D;
    font-size: 16px;
    display: block;
    margin: 5px 0;
  }
  .comment p {
    font-size: 16px;
    color: #333;
  
  }
  .reply {
    margin: 15px 0 15px 50px;
  
  }
  .comment b span {
    color: #333;
    font-size: 14px;
    margin-left: 20px;
  }
  .commentBox {
    margin: 20px;
  }
  .commentBox h3 {
    color: #634322;
    background: #e9e5df;
    padding: 8px 15px;
    text-align: left;
    font-size: 16px;
  }
  .commentBox textarea {
    overflow: auto;
    width: 100%;
    height: 95px;
    outline: none;
    resize: none;
    padding: 0;
    margin: 5px 0 0 0;
  }
  .comment + .comment, .reply + .reply {
    border-top: 1px solid #ccc;
}
.el-button.is-round {
    border-radius: 56px!important;
    padding: 8px 23px!important;
}
</style>

